<template>
  <el-dialog v-model="useDilogoStorex.dialogFormVisible" title="新增文章">
    <el-form :model="form">
      <el-form-item label="分类名称">
        <el-input v-model="form.categoryName"/>
      </el-form-item>
      <el-form-item label="分类别名">
        <el-input v-model="form.categoryAlias"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="useDilogoStorex.dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="AddCategory">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { nextTick, reactive, ref } from 'vue'
import { useDilogoStore } from '@/stores/dilog.ts'
import { categoryAdd } from '@/api/category.ts'
import { ElMessage } from 'element-plus'
import { categoryList } from '@/api/users.ts'

const useDilogoStorex = useDilogoStore()


const List =  () => categoryList().then(res=>{
  if (res.data.code == 200){
    useDilogoStorex.tableData = res.data.data
    console.log("2111"+useDilogoStorex.tableData)
  }else {
    ElMessage.error("渲染失败")
  }
})

const AddCategory = () => categoryAdd(form).then(res => {
  if (res.data.code == 200){
    form.tableData = res.data.data
    useDilogoStorex.dialogFormVisible = false
    ElMessage.success("新增成功")
    // 使用 nextTick 确保 DOM 更新后再刷新数据
    nextTick(() => {
      List();  // 刷新数据
    });
    console.log("add"+useDilogoStorex.tableData)
  }else {
    ElMessage.error("新增失败")
  }
})




const form = reactive({
  // tableData: [],
  categoryName:'',
  categoryAlias:'',
  createUser:'',
  createTime:'',
  category: '',
  status: '',
  name: ''
})
</script>
